<template>
  <a-modal
    :title="title"
    :width="520"
    :visible="visible"
    :maskClosable="false"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input v-decorator="['id']"/>
        </a-form-item>

        <a-form-item
          label="导航图标"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          style="margin-bottom: 0"
          has-feedback
        >
          <a-upload
            list-type="picture-card"
            :file-list="fileList"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <div v-if="fileList.length === 0">
              <a-icon type="plus"/>
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
        </a-form-item>

        <a-form-item
          label="导航标题"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入导航标题" v-decorator="['title', {rules: [{required: true, message: '至少需要一个导航标题！'}]}]"/>
        </a-form-item>

        <a-form-item
          label="导航描述"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input placeholder="请输入导航描述" v-decorator="['desc', {rules: [{required: true, message: '至少需要一个导航描述！'}]}]"/>
        </a-form-item>

        <a-form-item
          label="导航链接"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          style="margin-bottom: 0"
        >
          <a-form-model>
            <a-row :gutter="20" :key=index v-for="(link,index) in linkForm">
              <a-col :md="7" :sm="24">
                <a-input placeholder="链接标题" v-model="link.name"/>
              </a-col>

              <a-col :md="15" :sm="24" style="margin-right: 0">
                <a-input placeholder="请输入链接地址" v-model="link.url"/>
              </a-col>
              <a-col :md="2" :sm="24" v-if="linkForm.length >1">
                <a-icon class="minusIcon" type="minus-circle" @click="remove(index)"/>
              </a-col>
            </a-row>
          </a-form-model>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="{span: 19, offset: 5}"
        >
          <a-button type="dashed" block @click="add()">
            <a-icon type="plus"/>
            添加链接(推荐最多三个)
          </a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import * as api from '@/api/system/navManage'
  // 导入提示信息字典
  import config from '@/config/dict'

  export default {
    name: 'sForm',
    data() {
      return {
        labelCol: {
          xs: { span: 10 },
          sm: { span: 5 },
          md: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 },
          md: { span: 19 }
        },
        visible: false,
        title: '',
        confirmLoading: false,
        linkForm: [{}],
        loading: false,
        fileList: [],
        form: this.$form.createForm(this)
      }
    },
    methods: {
      // 初始化方法
      open(record) {
        this.visible = true
        if (record) {
          this.title = '编辑链接'
          this.linkForm = record.links
          setTimeout(() => {
            this.setItem(record)
          }, 100)
          if (record.logo) {
            this.fileList = [{ uid: 0, thumbUrl: record.logo, status: 'done', name: 'image.png' }]
          }
        } else {
          this.title = '新增链接'
        }
        this.confirmLoading = false
      },
      setItem(record) {
        this.form.setFieldsValue(
          {
            id: record.id,
            title: record.title,
            desc: record.desc
          }
        )
      },
      add() {
        this.linkForm.push({})
      },
      remove(index) {
        this.linkForm.splice(index, 1)
      },
      beforeUpload(file) {
        if (file.size / 1024 > 100) {
          this.$message.error('图片将直接存储至数据库，请上传小于100KB的图片')
          setTimeout(() => this.fileList = [])
        }
        return false
      },
      handleChange({ fileList }) {
        this.fileList = fileList
      },
      // [确认按钮]提交数据方法
      handleSubmit() {
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            values.logo = this.fileList[0].thumbUrl
            values.links = this.linkForm
            if (values.id) {
              this.message = config.msgDict[1]
              api.updateObj(values).then((res) => {
                this._handle_response(res, values)
              }).finally((res) => {
              })
            } else {
              this.message = config.msgDict[0]
              api.addObj(values).then((res) => {
                this._handle_response(res, values)
              }).finally((res) => {
              })
            }
          }
        })
      },
      // 处理返回消息
      _handle_response(res, values) {
        if (res.success) {
          this.$message.success(this.message['success'])
          this.handleCancel()
          this.$emit('ok', values)
        } else {
          this.$message.error(this.message['failed'] + res.message)
        }
      },
      // [取消按钮]重置数据,关闭弹框
      handleCancel() {
        this.form.resetFields()
        this.linkForm = [{}]
        this.fileList = []
        this.visible = false
      }
    }
  }
</script>
<style>
  .minusIcon {
    font-size: 26px;
    color: #a6a6a6;
    margin-top: 5px;
  }

  .minusIcon:hover {
    color: #ff4d4f;
  }
</style>
